<template>
  <div class="topbar">
    <div class="topbar-left">
      <!-- 左侧图标 -->
<el-icon :size="30" @click="handleIcon"><Expand /></el-icon>
      <!-- 面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>数据大屏</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="topbar-right">
      <!-- 刷新、全屏、下拉菜单图标 -->
       <el-button :icon="Refresh" circle></el-button>
        <el-button :icon="FullScreen" circle></el-button>
        <el-button :icon="Setting" circle></el-button>
        <img src="../../public/vite.svg" alt="" style="width: 24px;
        height: 24px; margin: 0 10px;">
        <el-dropdown>
    <span class="el-dropdown-link">
      admin
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
  <!-- Dropdown 插槽 -->
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

      </div>
  </div>
</template>

<script setup>
import { ArrowRight, FullScreen, Refresh, Setting } from '@element-plus/icons-vue'
import { useCounterStore } from '../store';
const collapseStore = useCounterStore()
//点击图标时使左侧菜单折叠
const handleIcon = ()=>{
collapseStore.foldMenu()
}
</script>

<style lang="scss" scoped>
.topbar {
  width: 100%;
  height: 70px;
  background-color: antiquewhite;
  display: flex;
  justify-content: space-between;
  .topbar-left{
    display: flex;
    align-items: center;
.el-icon{
      margin: 0 10px;
}
  }
  .topbar-right{
    display: flex;
    align-items: center;
    padding: 20px;
  }
  
}
</style>
